<template>
  <div class="main">
    <my-header class="header-main">
      <login-bar></login-bar>
    </my-header>
    <img
      class="banner"
      :src="banner"
      alt=""
    >
    <div class="form-wrap p-rel">
			<div class="title font-bold">
				<p>Startup 旨在帮助区块链行业的创新和技术进步，提供优质区块链初创项目上线的通道</p>		
			</div>
      <div class="right_pos">
        <el-button type="danger" icon="el-icon-document" @click="navigateTo('/Startup/startipList')">我的参与记录</el-button>	
      </div>
      <div class="start_ico">
        <h4>正在进行中</h4>
        <div class="start_list">
          <el-row :gutter="20">
              <div v-if="StartOneAllData.length>0">
							<el-col :span="6" v-for="(item, index) in StartOneAllData" :key="index" class="ma20" >
								<div class="grid-content bg-purple" @click='navigateTo("/Startup/Startup_info",{type:currentId,qid:item.id})'>
								
							</div>
							</el-col>
              </div>
              <div
                v-else
                class="table-no-data txt-center font-20"
                v-text="$t('label108')"
              ></div>
          </el-row>  
        </div>
      </div>
      <div class="form min_h1000 icolist_twobox">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="tabtitle">
					<el-tab-pane label="即将开始" name="1">
            <el-row :gutter="20">
              <div v-if="StartAllData.length>0" class="list_box">
							<el-col :span="6" v-for="(item, index) in StartAllData" :key="index" class="ma20" >
								<div class="grid-content bg-purple" @click='navigateTo("/Startup/Startup_info",{type:currentId,qid:item.id})'>
								
							</div>
							</el-col>
              </div>
              <div
                v-else
                class="table-no-data txt-center font-20"
                v-text="$t('label108')"
              ></div>
						</el-row>
          </el-tab-pane>
					<el-tab-pane label="已经结束" name="2">
            <el-row :gutter="20">
              <div v-if="StartAllData.length>0" class="list_box">
							<el-col :span="6" v-for="(item, index) in StartAllData" :key="index" class="ma20" >
								<div class="grid-content bg-purple" @click='navigateTo("/Startup/Startup_info",{type:currentId,qid:item.id})'>
								
							</div>
							</el-col>
              </div>
              <div
                v-else
                class="table-no-data txt-center font-20"
                v-text="$t('label108')"
              ></div>
						</el-row>
          </el-tab-pane>
				</el-tabs>
      </div>
      
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
import axios from "axios";
import CountDown from 'vue2-countdown'
export default {
  data() {
    return {
      banner: require("@/assets/images/shangbi/super01.png"),
			canSubmit: true,
      activeName: '1',
      StartAllData:[],
      StartOneAllData:[],
      countdownTime:'',
      state:'0',
    };
  },
  watch:{
    
  },
  computed: {
    
  },
  components: {
    CountDown
  },
  mounted() {
    this.geticolistOne()
    this.geticolist();
    // this.getlockincomebill();
  },
  methods: {
    handleClick(tab, event) {
      //选项卡数据切换
        console.log(tab, event);
        console.log(event.target.getAttribute('id'))  //获取到当前元素的id
        const id=event.target.getAttribute('id');
        this.state=event.target.getAttribute('id');
      if(id=='tab-0'){
        this.StartAllData=[];
        this.state=1;//正在进行中
        this.geticolist();
      } else if(id=='tab-1'){
        this.StartAllData=[];
        this.state=0;//0:即将开始
        this.geticolist();
      }else if(id=='tab-2'){
        this.StartAllData=[];
        this.state=2;
        this.geticolist(2);
      }
    },
    // 进行中 state:'0',(0:即将开始；1：正在进行中，2：已完成)
    geticolistOne(){
      const stratIng =1;//1：正在进行中
      this.request(this.api.geticolist,{state:stratIng}).then(res => {
        if (res.code == "0") {
          this.StartOneAllData = res.data || "";
        } else {
          this.errMsg(res.msg || "操作失败");
        }
      });
    },
    geticolist(){
      this.request(this.api.geticolist,{state:this.state}).then(res => {
        if (res.code == "0") {
          this.StartAllData = res.data || "";
          console.log(this.StartAllData);
          // 构建新的数组
              // this.StartAllData.map(item=>{
              //   console.log(item.endwritedate);
              //   item.endwritedate='2019-06-28 18:50:54';
              //   item.nowwritedate='2019-06-26 18:50:54';
              //   item.statewritedate='2019-06-27 18:50:54';
              // })
              console.log(this.StartAllData);
              
        } else {
          this.errMsg(res.msg || "操作失败");
        }
      });
    },
    // 倒计时组件
    countDownS_cb: function (x) {
      console.log(x)
    },
    countDownE_cb: function (x) {
      console.log(x)
    }
  }
};
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
}
.form-wrap,
.requirement {
  @include hCenter;
  width: 1200px;
  padding: 25px 0;
  border: $default-border;
  border-radius: 4px;
  background: $bg-white;
}
.requirement {
  margin-top: 25px;
  padding: 0 30px 30px 30px;
  box-sizing: border-box;
  dl {
    margin-top: 32px;
    dt {
      font-size: $font-large;
      color: $color-danger;
      margin-bottom: 10px;
    }
    dd {
      line-height: 1.8;
    }
  }
}
.form-wrap {
  margin-top: -100px;
  .title {
    text-align: center;
    font-size: $font-middile;
    width: 750px;
    margin: 0 auto;
    text-align: justify;
  }
  .form {
    padding: 0 25px;
    margin-top: 30px;
    button {
      margin-top: 30px;
    }
  }
}
// super 币种设置
.ma20{margin: 20px 0;}
.lo_image{width: 100%;max-width: 270px;max-height: 190px;height: 186px;}
.lo_image:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}
.lo_name:hover{color: $main-bg-color}
.cor_yell{color: $txt-red}
.time_box{
	button{width: 100%;}
}
.min_h1000{min-height: 1000px;}
.line_16{line-height: 16px;height: 32px;}
.right_pos{position: absolute;right: 30px;top: 30px;}
// 新版本样式
.start_ico{
  margin-top: 30px;
  h4{font-size: 24px;padding-left: 15px;border-left: 3px solid #00ad82;margin-left: 12px;}
}
.start_list{padding:5px 12px;}
.list_box{
  h3{color: #00ad82;}
  // h4{color: #ffffff}
  // p{color: #ffffff;}
  // .el-progress__text{color: #ffffff;}
}
</style>


